<template>
  <div class="app-container">
    文章添加
      <el-form label-width="150px">
        <el-form-item label="文章标题">
          <el-input v-model="searchObj.title"/>
        </el-form-item>
        <el-form-item label="jpg图片（可选）">
          <el-upload
            list-type="picture"
            action=''
            accept=".jpg"
            :limit="1"
            :auto-upload="false"
            :on-change="getFile"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleUploadRemove"
          >
            <el-button size="small" type="primary" v-if="inputVisible">选择图片上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传一张jpg文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片" >
        <img
          style="width: 100px; height: 100px"
          :src="'data:image/jpeg;base64,'+searchObj.image"
          :fit="fit">
          <el-button @click="handleUploadRemove">删除</el-button>
      </el-form-item>
        <el-form-item label="正文">
          <quill-editor ref="text" v-model="searchObj.article" class="myQuillEditor" :options="editorOption" />
        </el-form-item>
      </el-form>
    <el-button @click="upload">提交</el-button>
  </div>
</template>
<script>
import article from '@/api/article'
export default {
  data(){
    return{
      searchObj:{
        title:"",
        image:"",
        article:""
      }, //条件封装对象
      inputVisible:true,
      dialogVisible:false
    }
  },
  created() {
    if(this.$route.params&&this.$route.params.id){
      const id=this.$route.params.id
      this.showInfo(id)
    }else{
      this.searchObj={
        title:"",
        image:"",
        article:""
      }


    }
  },
  methods:{
    showInfo(id){
      article.getInfo(id)
        .then(response=>{
          this.searchObj=response.data
          console.log(this.searchObj)
        })
    },
    getFile(file) {
      this.getBase64(file.raw).then(res => {
        const params = res.split(',')
        console.log(params, 'params')
        if (params.length > 0) {
          this.searchObj.image = params[1]
        }
      })
      this.inputVisible=false
      console.log(this.searchObj.image)
    },
// 获取图片转base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    handleUploadRemove(file, fileList) {
      this.searchObj.image = '';
      this.inputVisible=true;
      this.$forceUpdate()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    upload(){
      console.log(this.searchObj)
      article.saveArticle(this.searchObj)
      this.$router.push({path:'/article/list'})
    }
  }
}
</script>
